<template>
  <div class="containerWrapNoHeader">
    <el-row class="commonHeaderTwo">
      <el-col type="flex" justify="flex-start">
        <el-select
          v-model="province"
          size="mini"
          placeholder="请选择"
          style="width: 110px"
          @change="repeatInFive"
        >
          <el-option
            v-for="province in provinceList"
            :key="province.code"
            :label="province.fullName"
            :value="province.code">
          </el-option>
        </el-select>
      </el-col>
      <Navigation style="margin-top: 2px"/>
    </el-row>
    <!-- Tab标签 -->
    <el-row style="padding: 0 14px;" type="flex">
      <div class="tab" :style="{ background: tabSelect === 1 ? '#2d8cf0' : '' }" @click="clickTab(1)">
        PING业务分析
      </div>
      <div class="tab" :style="{ background: tabSelect === 2 ? '#2d8cf0' : '' }" @click="clickTab(2)">
        DNS业务分析
      </div>
      <div class="tab" :style="{ background: tabSelect === 3 ? '#2d8cf0' : '' }" @click="clickTab(3)">
        视频业务分析
      </div>
      <div class="tab" :style="{ background: tabSelect === 4 ? '#2d8cf0' : '' }" @click="clickTab(4)">
        游戏业务分析
      </div>
      <div class="tab" :style="{ background: tabSelect === 5 ? '#2d8cf0' : '' }" @click="clickTab(5)">
        网页业务分析
      </div>
    </el-row>
    <el-row type="flex" :gutter="16" class="bottomWrap">
      <el-col :span="19">
        <el-row type="flex" :gutter="16">
          <el-col :span="14">
            <!-- 左一图表 -->
            <el-row class="rightWrap">
              <el-row style="height: calc(100% - 32px)">
                <CommonTableNoPoint
                  :data-list="dataListLeft.slice((currentPageLeft-1)*10,currentPageLeft*10)"
                  :header-list="headerListLeft[tabSelect - 1]"
                  :title="`${this.$store.getters.getLocation}业务指标及综合打分表`"
                  border
                  style="width: 100%;background: rgba(24,66,107,0.59);"
                />
              </el-row>
              <el-row style="height: 26px;display: flex;justify-content: space-between;margin-top: 10px">
                <el-col style="width: 60px;">
                  <download-excel
                    :data="excelDataLeft"
                    :fields="excelHeaderLeft"
                    :name="`${excelNameLeft}.xls`"
                    worksheet = "My Worksheet"
                  >
                    <el-button type="primary" size="mini">导出</el-button>
                  </download-excel>
                </el-col>
                <el-col align="right">
                  <el-pagination
                    background
                    small
                    :page-size="10"
                    :current-page="currentPageLeft"
                    layout="prev, pager, next"
                    :total="dataListLeft.length"
                    @current-change="currentPageChangeLeft"
                  />
                </el-col>
              </el-row>
            </el-row>
          </el-col>
          <el-col :span="10">
            <el-row ref="radarWrap" class="rightWrap">
              <el-row style="height: calc(100% - 32px)">
                <CommonTableNoPoint
                  :data-list="dataListRight.slice((currentPageRight-1)*10,currentPageRight*10)"
                  :header-list="headerListRight"
                  :title="'用户质差业务展示'"
                  border
                  style="width: 100%;background: rgba(24,66,107,0.59);"
                />
              </el-row>
              <el-row style="height: 26px;display: flex;justify-content: space-between;margin-top: 10px">
                <el-col style="width: 60px;">
                  <download-excel
                      :data="excelDataRight"
                      :fields="excelHeaderRight"
                      :name="`${excelNameRight}.xls`"
                      worksheet = "My Worksheet"
                  >
                    <el-button type="primary" size="mini">导出</el-button>
                  </download-excel>
                </el-col>
                <el-col align="right">
                  <el-pagination
                    background
                    small
                    :page-size="10"
                    :current-page="currentPageRight"
                    layout="prev, pager, next"
                    :total="dataListRight.length"
                    @current-change="currentPageChangeRight"
                  />
                </el-col>
              </el-row>
            </el-row>
          </el-col>
        </el-row>
        <el-row style="margin-top: 2vh">
          <ThreeBottom
            :type="tabSelectName"
            :typeValue="tabValue"
            :code="query.user_code"
          />
        </el-row>
      </el-col>
      <el-col :span="5">
        <ThreeRightOneTop
          :endVal="endVal"
          :percentage="percentage"
        />
        <ThreeRightOneMiddle
          :percentage="percentage"
          style="margin-top: 2vh"/>
        <ThreeRightOneBottom
          :vendor="vendor"
          style="margin-top: 2vh"/>
        <ThreeRightTwo
          :scoreDataList="scoreDataList"
          style="margin-top: 2vh"/>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import ThreeRightOneTop from './components/ThreeRightOneTop'
  import ThreeRightOneMiddle from './components/ThreeRightOneMiddle'
  import ThreeRightOneBottom from './components/ThreeRightOneBottom'
  import ThreeRightTwo from './components/ThreeRightTwo'
  import ThreeBottom from './components/ThreeBottom'
  import Navigation from '@c/Navigation'
  import CommonTableNoPoint from '@c/CommonTableNoPoint'
  import MapData from '@/config'
  import ExcelHeaderList from '@/config/exportExcelData'

  export default {
    name: 'Combine',
    components: {
      ThreeRightOneTop,
      ThreeRightOneMiddle,
      ThreeRightOneBottom,
      ThreeBottom,
      ThreeRightTwo,
      Navigation,
      CommonTableNoPoint
    },
    data() {
      return {
        excelHeaderLeftList: ExcelHeaderList.excelHeaderLeftLIst, // 导出excel表头,左表
        excelHeaderRight: ExcelHeaderList.headerListRight, // 导出excel表头,右表
        excelHeaderLeft: {}, // 导出左表excel表头
        excelDataLeft: [], // 导出左表excel数据,list转json字符串
        excelDataRight: [], // 导出右表excel数据,list转json字符串
        excelNameLeft: '',
        excelNameRight: '',
        headerListLeft: [
          ['地域', '目的', '综合得分', '时延(ms)', '抖动(ms)', '丢包率(%)'],
          ['地域', '目的', '综合得分', '解析时延(ms)', '成功率(%)'],
          ['地域', '目的', '综合得分', '首次缓冲时长(ms)','下载速率(KB/s)','卡顿次数'],
          ['地域', '目的', '综合得分', '游戏时延(ms)', 'PING时延(ms)', '官网连接时延(ms)'],
          ['地域', '目的', '综合得分', '连接时延(ms)', '首字节时延(ms)', '下载速度(KB/s)'],
        ],
        headerListRight: ['质差用户','网关型号','综合得分'], // 右表表头
        dataListLeft: [], // 左边数据
        dataListRight: [], // 右表数据
        scoreDataList: [],
        province: '',
        query: {
          user_level: null,
          user_code: ''
        },
        originalData: {
          data: [],
          range: [],
          isGroupUsers: false
        },
        range: [],
        dataList: [],
        provinceList: MapData.originProvinceList,
        tabSelect: 1,
        tabSelectName: 'PING',
        tabValue: 'ping',
        currentPageLeft: 1,
        currentPageRight: 1,
        code: null,
        endVal: 0,
        percentage: 0,
        vendor: ''
      }
    },
    created() {
      this.$bus.$off('locationSelect')
      this.$bus.$on('locationSelect', this.repeatInFive)
    },
    mounted() {
      this.init()
    },
    // 离开页面结束循环
    beforeRouteLeave(to, from, next) {
      if (this.timer) {
        clearInterval(this.timer)
      }
      next()
    },
    methods: {
      init(){
        this.getQuery(window.location.search)
      },
      // Url中的参数转为Object
      getQuery(searchString) {
        let item = {}
        const args = searchString.length > 0 ? searchString.replace('?','').split('&') : '[]'
        for (let i of args ){
          item[i.split('=')[0]] = i.split('=')[1]
        }
        this.query = item
        this.$store.commit('setIsGroupUsers', this.query.user_level === '0')
        this.code = this.query.user_code
        this.repeatInFive(this.query.user_code)
      },
      // 将mos原始数据分两页
      getDataList(arr) {
        if (arr.length > 16) {
          let arr1 = []
          let arr2 = JSON.parse(JSON.stringify(arr))
          for (let i=0;i<16;i++) {
            const tmpArr = arr2.splice(0, 1)
            arr1.push(...tmpArr)
          }
          this.dataList = [arr1, arr2]
        } else {
          this.dataList = [arr]
        }
      },
      locationSelect(code) {
        this.$store.commit('setLocation', this.provinceList.find(item => item.code === code).name)
        this.code = code
        this.getScore(code)
        this.clickTab(this.tabSelect)
      },
      clickTab(val) {
        this.tabSelect = val
        this.resetData()
        this.$nextTick(() => {
          switch (val) {
            case 1:
              this.tabSelectName = 'PING'
              this.tabValue = 'ping'
              this.getPing(this.code)
              break
            case 2:
              this.tabSelectName = 'DNS'
              this.tabValue = 'dns'
              this.getDns(this.code)
              break
            case 3:
              this.tabSelectName = '视频'
              this.tabValue = 'flash'
              this.getFlash(this.code)
              break
            case 4:
              this.tabSelectName = '游戏'
              this.tabValue = 'game'
              this.getGame(this.code)
              break
            case 5:
              this.tabSelectName = '网页'
              this.tabValue = 'http'
              this.getHttp(this.code)
              break
          }
        })
        this.$nextTick(() => {
          this.$bus.$emit('provinceChangedThree', this.code)
        })
      },
      getPing(code) {
        window._api.apiPing({ code }).then(res => {
          if (res.state === 'ok') {
            res.data.map(item => {
              this.dataListLeft.push([
                item.name,
                item.dest_name,
                item.score,
                item.rtt,
                item.jitter,
                item.lost_rate
              ])
            })
            res.data[0].user_quality.map(item => {
              this.dataListRight.push([
                item.pppoe_username,
                item.pc,
                item.score
              ])
            })
            this.endVal = res.user_num
            this.percentage = res.user_percent
            this.vendor = res.user_vendor

            // 左表excel数据
            this.excelHeaderLeft = this.excelHeaderLeftList[0]
            res.data.map(item => {
              this.excelDataLeft.push({
                name: item.name,
                dest_name: item.dest_name,
                score: item.score,
                rtt: item.rtt,
                jitter: item.jitter,
                lost_rate: item.lost_rate
              })
            })
            this.excelNameLeft = `${this.$store.getters.getLocation}PING业务指标及综合打分表-${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`

            // 右表excel数据
            this.excelDataRight = []
            res.data[0].user_quality.map(item => {
              this.excelDataRight.push({
                pppoe_username: item.pppoe_username,
                pc: item.pc,
                score: item.score
              })
            })
            this.excelNameRight = `${this.$store.getters.getLocation}PING用户质差业务展示-${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      getDns(code) {
        window._api.apiDns({ code }).then(res => {
          if (res.state === 'ok') {
            res.data.map(item => {
              this.dataListLeft.push([
                item.name,
                item.dest_name,
                item.score,
                item.time_cost,
                item.success_rate
              ])
            })
            res.data[0].user_quality.map(item => {
              this.dataListRight.push([
                item.pppoe_username,
                item.pc,
                item.score
              ])
            })
            this.endVal = res.user_num
            this.percentage = res.user_percent
            this.vendor = res.user_vendor

            // 左表excel数据
            this.excelHeaderLeft = this.excelHeaderLeftList[1]
            res.data.map(item => {
              this.excelDataLeft.push({
                name: item.name,
                dest_name: item.dest_name,
                score: item.score,
                time_cost: item.time_cost,
                success_rate: item.success_rate
              })
            })
            this.excelNameLeft = `${this.$store.getters.getLocation}DNS业务质差用户展示-${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`

            // 右表excel数据
            res.data[0].user_quality.map(item => {
              this.excelDataRight.push({
                pppoe_username: item.pppoe_username,
                pc: item.pc,
                score: item.score
              })
            })
            this.excelNameRight = `${this.$store.getters.getLocation}DNS用户质差业务展示-${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      getFlash(code) {
        window._api.apiFlash({ code }).then(res => {
          if (res.state === 'ok') {
            res.data.map(item => {
              this.dataListLeft.push([
                item.name,
                item.dest_name,
                item.score,
                item.first_pause_cost,
                item.avg_speed,
                item.pause_cost
              ])
            })
            res.data[0].user_quality.map(item => {
              this.dataListRight.push([
                item.pppoe_username,
                item.pc,
                item.score
              ])
            })
            this.endVal = res.user_num
            this.percentage = res.user_percent
            this.vendor = res.user_vendor

            // 左表excel数据
            this.excelHeaderLeft = this.excelHeaderLeftList[2]
            res.data.map(item => {
              this.excelDataLeft.push({
                name: item.name,
                dest_name: item.dest_name,
                score: item.score,
                first_pause_cost: item.first_pause_cost,
                avg_speed: item.avg_speed,
                pause_cost: item.pause_cost
              })
            })
            this.excelNameLeft = `${this.$store.getters.getLocation}视频业务质差用户展示-${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`

            // 右表excel数据
            res.data[0].user_quality.map(item => {
              this.excelDataRight.push({
                pppoe_username: item.pppoe_username,
                pc: item.pc,
                score: item.score
              })
            })
            this.excelNameRight = `${this.$store.getters.getLocation}视频用户质差业务展示-${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      getGame(code) {
        window._api.apiGame({ code }).then(res => {
          if (res.state === 'ok') {
            res.data.map(item => {
              this.dataListLeft.push([
                item.name,
                item.dest_name,
                item.score,
                item.tcp_cost,
                item.rtt,
                item.conn_cost
              ])
            })
            res.data[0].user_quality.map(item => {
              this.dataListRight.push([
                item.pppoe_username,
                item.pc,
                item.score
              ])
            })
            this.endVal = res.user_num
            this.percentage = res.user_percent
            this.vendor = res.user_vendor

            // 左表excel数据
            this.excelHeaderLeft = this.excelHeaderLeftList[3]
            res.data.map(item => {
              this.excelDataLeft.push({
                name: item.name,
                dest_name: item.dest_name,
                score: item.score,
                tcp_cost: item.tcp_cost,
                rtt: item.rtt,
                conn_cost: item.conn_cost
              })
            })
            this.excelNameLeft = `${this.$store.getters.getLocation}游戏业务质差用户展示-${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`

            // 右表excel数据
            res.data[0].user_quality.map(item => {
              this.excelDataRight.push({
                pppoe_username: item.pppoe_username,
                pc: item.pc,
                score: item.score
              })
            })
            this.excelNameRight = `${this.$store.getters.getLocation}游戏用户质差业务展示-${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      getHttp(code) {
        window._api.apiHttp({ code }).then(res => {
          if (res.state === 'ok') {
            res.data.map(item => {
              this.dataListLeft.push([
                item.name,
                item.dest_name,
                item.score,
                item.conn_cost,
                item.first_byte_cost,
                item.avg_speed
              ])
            })
            res.data[0].user_quality.map(item => {
              this.dataListRight.push([
                item.pppoe_username,
                item.pc,
                item.score
              ])
            })
            this.endVal = res.user_num
            this.percentage = res.user_percent
            this.vendor = res.user_vendor

            // 左表excel数据
            this.excelHeaderLeft = this.excelHeaderLeftList[4]
            res.data.map(item => {
              this.excelDataLeft.push({
                name: item.name,
                dest_name: item.dest_name,
                score: item.score,
                conn_cost: item.conn_cost,
                first_byte_cost: item.first_byte_cost,
                avg_speed: item.avg_speed
              })
            })
            this.excelNameLeft = `${this.$store.getters.getLocation}网页业务质差用户展示-${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`

            // 右表excel数据
            res.data[0].user_quality.map(item => {
              this.excelDataRight.push({
                pppoe_username: item.pppoe_username,
                pc: item.pc,
                score: item.score
              })
            })
            this.excelNameRight = `${this.$store.getters.getLocation}网页用户质差业务展示-${new Date().getFullYear()}-${new Date().getMonth() + 1}-${new Date().getDate()}`
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      getScore(code) {
        window._api.apiSynthesisScore({ code }).then(res => {
          if (res.state === 'ok') {
            this.scoreDataList = []
            this.scoreDataList = res.data.sort((a,b) => b.score - a.score)
          } else {
            this.$message.warning('数据异常')
          }
        })
      },
      currentPageChangeLeft(val) {
        this.currentPageLeft = val
      },
      currentPageChangeRight(val) {
        this.currentPageRight = val
      },
      resetData() {
        this.dataListLeft = []
        this.dataListRight = []
        this.excelDataLeft = []
        this.excelDataRight = []
        this.endVal = 0
        this.percentage = 0
        this.vendor = ''
      },
      repeatInFive(code) {
        if (this.timer) {
          clearInterval(this.timer)
        }
        this.locationSelect(code)
        this.timer = setInterval(() => {
          this.locationSelect(code)
        }, 1000 * 60 * 5)
      }
    }
  }
</script>
<style scope>
  .commonHeaderTwo {
    display: flex;
    height: 36px;
    justify-content: space-between;
    color: #ffffff;
    padding: 6px 10px 6px 24px;
  }
  .containerWrapNoHeader{
    position: relative;
    height: 100vh;
    background: url("../../assets/images/bg_no_header_jpg.jpg") scroll center no-repeat;
    background-size: 100% 100%;
  }
  .tab{
    flex: 1;
    cursor: pointer;
    height: 46px;
    line-height: 46px;
    text-align: center;
    border: 1px solid rgba(14,101,187,0.66);
    border-radius: 10px 10px 0 0;
    font-size: 20px;
    color: #FFFFFF;
    background: rgb(10, 28, 45);
  }
  .tab:hover{
    background: #2d8cf0;
  }
  .bottomWrap{
    margin: 0 14px;
    padding: 14px;
    border: 1px solid rgba(14,101,187,0.66);
    border-top-width: 0px;
  }
  .rightWrap{
    height: 58vh;
    background: rgba(0,33,135,0.24);
    border: 1px solid rgba(14,101,187,0.66);
    box-shadow: inset 0px 0px 50px 0px rgba(0,12,125,1);
    padding: 18px;
    display: flex;
    flex-direction: column;
    align-content: space-between;
  }
</style>
<style>
  .el-dropdown-link {
    cursor: pointer;
    color: #409EFF;
  }
  .el-icon-arrow-down {
    font-size: 12px;
  }
  .el-input__inner{
    background: #003F87;
    border: 1px solid #409EFF
  }
  .el-select-dropdown{
    background: rgba(0,63,135,0.9);
    border: 1px solid #409EFF
  }
  .el-select-dropdown__item{
    color: white
  }
  .el-select-dropdown__item.hover{
    background: #409EFF;
  }
  .el-input__inner{
    color: white
  }
</style>
